<template>
  <f7-page>
    <qm-currentcy-navbar title="资讯">
    </qm-currentcy-navbar>
    <f7-block class="information-wrapper">
      <h2 class="title">银行利率上调5%，将影响楼市将影响楼市响楼市</h2>
      <div class="date spacing">
        2022.03.16  12:00
      </div>
      <div class="subtitle spacing">
        会前部分是产品销售前进行的一系列吸引顾客、亲近顾客、使其关注你并对你的为人、你的产品和你的企业产生足够兴趣的过程。顾客在会销现场是否购买，有80%的因素取决于会前沟通工作做得是否扎实和到位。因此，会前部分是会销的重点部分。
      </div>
      <div class="picture spacing">
        <img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="100%">
      </div>
      <div class="text">
        <h4>1、会前决策</h4>
        <span>通过对确定的准顾客的了解，进行系统的会前策划。会前策划是会议成功与否的根本，没有好的会前策划也就没有好的会议成绩。会前策划主要包括企业形象、产品包装、会议主题、会议程序、会议管理、会议中可能出现问题的应急解决方法等。会前策划要尽量提前，要考虑到整个会议的每一个细节。</span>
        <h4>2、数据搜集</h4>
        <span>通过各种渠道收集准顾客信息，这些信息包括准顾客姓名、年龄、家庭住址、联系电话、家庭收入、健康状况等，建立准顾客档案，并对这些档案进行分析整理。根据准顾客需求状况，对准顾客档案进行分类，分析哪些准顾客是我需要的，是对我有用的，确定目标消费</span>
      </div>
    </f7-block>
    <qm-fixed-nail top="80%" left="80%">
      <template #content>
        <div class="collection">
          <img src="static/img/information/collection.png" alt="collection">
        </div>
      </template>
    </qm-fixed-nail>
  </f7-page>
</template>

<script>
export default {
  name: "information"
}
</script>

<style lang="less" scoped>
.information-wrapper {
  margin: 0;
  padding: calc(20px * var(--ratio)) calc(36px * var(--ratio));

  .title {
    margin-bottom: calc(24px * var(--ratio));
    font-size: calc(40px * var(--ratio));
    color: var(--color-text-title);
  }

  .date {
    font-size: calc(26px * var(--ratio));
    color: var(--color-text-subtext);
    line-height: calc(37px * var(--ratio));
  }

  .subtitle {
    font-size: var(--font-size-maincontent);
    color: var(--color-text-title);
    line-height: calc(54px * var(--ratio));
  }

  .spacing {
    margin-bottom: calc(30px * var(--ratio));
  }

  .text {
    font-size: var(--font-size-maincontent);
    color: var(--color-text-title);
    line-height: calc(54px * var(--ratio));

    h4 {
      margin: calc(35px * var(--ratio)) 0 calc(10px * var(--ratio));
      &:first-child {
        margin-top: calc(10px * var(--ratio));
      }
    }
  }
}

.collection {
  width: calc(120px * var(--ratio));
  height: calc(120px * var(--ratio));
  border-radius: 50%;

  img {
    width: 100%;
  }
}

::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}
</style>
